<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园交流平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--模板通用css-->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入wangEdit富文本编辑器 -->
    <script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>
</head>
<body>
    <el-container id="app" v-cloak>
        <div th:replace="fragment/common::header"></div>
            <div class="pad"></div>
            <el-main>
                <el-card  class="box-card">
                    <div class="title">
                        <h1 style="height:50px;line-height:50px;">{{blog.title}}</h1>
                        <div class="info">
                            <span style="margin-right:10px;color:#606266">{{blog.createtime}}</span>
                            <el-link :href="'showuserinfo?name='+blog.username" type="success" style="margin-right:10px;" target="_blank">{{blog.username}}</el-link>
                            <span style="color:#606266">评论数:{{comments.length}}</span>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <div class="content" ref="content">
                    </div>
                    <el-divider></el-divider>
                    <el-input type="textarea" placeholder="想对作者说点什么" v-model="newCommentContent" rows="4"></el-input>
                    <el-button @click="newComment" type="primary" style="margin-top:10px;margin-bottom:20px;">发表评论</el-button>
                    <div class="comment" v-for="(comment,index) in comments" :key="index">
                        <span class="comuser">{{comment.username}}:</span>
                        <span class="comcontent">{{comment.content}}</span>
                        <span class="comcreate">({{comment.createTime}})</span>
                        <span class="comfooter">
                            <el-link @click="addReply(index)" type="success">&nbsp;&nbsp;回复</el-link>
                            <el-link @click="seeReply(index,false)" type="primary">&nbsp;&nbsp;查看回复</el-link>
                            <el-link v-if="admin||comment.username==userName" @click="deleteComment(index)" type="danger">&nbsp;&nbsp;删除</el-link>
                        </span>
                        <div class="replyDiv" ref="replyDiv" style="display:none;">
                            <div class="reply" v-for="(reply,rindex) in comment.replys">
                                <span class="comcontent">{{reply.fromusername}}:</span>
                                <span class="comcontent">回复&nbsp;&nbsp;{{reply.tousername}}:</span>
                                <span class="comcontent" style="color:#606266;">{{reply.content}}</span>
                                <span class="comcreate">({{reply.createtime}})</span>
                                <span class="comfooter">
                                        <el-link @click="replyToReply(index,rindex)" type="success">&nbsp;&nbsp;回复</el-link>
                                        <el-link v-if="admin||reply.fromusername==userName" @click="deleteReply(index,rindex)" type="danger">&nbsp;&nbsp;删除</el-link>
                                </span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-main>
            
    </el-container>
    <script th:inline="javascript">
        var editor;
        new Vue({
            el:'#app',
            data(){
                return{
                	activeIndex: '3',
                    userName:'张三 ',
                    blogId:'',
                    blog:{},//博客实体
                    comments:[],//评论
                    newCommentContent:'',//新评论内容
                    admin:false,
                    //replys:[],//回复
                }
            },
            created:function(){
            	this.userName=[[${session.userName}]];
            	//获取初始化数据
            	var id=[[${id}]];
            	this.blogId=id;
            	this.getInitData(id);
            	//是否admin
            	this.admin=[[${session.admin}]];
            },
            methods:{
            	//选择nav选项
            	handleSelect(key, keyPath){
                    switch(key){
                    case '1':
                    	window.location.href="index";
                    	break;
                    case '2':
                    	window.location.href="forum";
                        break;
                    case '3':
                    	window.location.href="blog";
                        break;
                    case '4-1':
                        window.location.href="http://www.dl-city.com/";
                        break;
                    case '4-2':
                        window.location.href="http://citytsg.dlut.edu.cn/index.htm";
                        break;
                    case '4-3':
                        window.location.href="http://cityftp.dlut.edu.cn/index.htm";
                        break;
                    case '4-4':
                        window.location.href="http://172.30.2.66/vod/action/indexListAction.do?method=indexShow";
                        break;
                    case '4-5':
                        window.location.href="http://tv.byr.cn/show";
                        break;
                    }
                },
                //获取初始化数据
                getInitData(id){
                	var _this=this;
                	//获取博客数据
                	$.ajax({
                		url:'initblog',
                		type:'GET',
                		data:{
                			id:id
                		},
                		dataType:'JSON',
                		success:function(data){
                			_this.blog=data;
                			_this.$refs.content.innerHTML=_this.blog.content;
                		}
                	});
                	//获取评论数据
                	$.ajax({
                        url:'initcomment',
                        type:'GET',
                        data:{
                            blogId:id
                        },
                        dataType:'JSON',
                        success:function(data){
                            _this.comments=data;
                        }
                    });
                },
              //查看回复
                seeReply(index,isRe){
                	var _this=this;
                	if(!isRe){
                		var display=_this.$refs.replyDiv[index].style.display;
                        if(display==''){//收起
                        	_this.$refs.replyDiv[index].style.display='none';
                        }else{//展开
                        	_this.$refs.replyDiv[index].style.display='';
                        }
                	}else{
                		_this.$refs.replyDiv[index].style.display='';
                	}
                },
                //新评论
                newComment(){
                	var _this=this;
                	if(_this.newCommentContent.length.trim==0){
                		_this.$message.warning("评论内容不能为空");
                		return false;
                	}
                	$.ajax({
                		url:'addcomment',
                		type:'GET',
                		data:{
                			content:_this.newCommentContent,
                			blogId:_this.blog.id
                		},
                		dataType:'JSON',
                		success:function(data){
                			_this.comments.unshift(data);
                			_this.newCommentContent='';
                		}
                	});
                },
                //添加回复
                addReply(index){
                	var _this=this;
                	
                	_this.$prompt('请输入回复内容', '回复', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        if(value==null||value.trim==0){
                        	_this.$message.warning("回复内容不能为空");
                            return false;
                        }
                        $.ajax({
                        	url:'addreply',
                        	type:'GET',
                        	data:{
                        		commentId:_this.comments[index].id,
                        		content:value,
                        		toUserId:_this.comments[index].userId
                        	},
                        	dataType:'JSON',
                        	success:function(data){
                        		_this.$message.success("回复成功");
                        		//获取评论数据
                                _this.getinitcomment();
                        		_this.seeReply(index,true);
                        	}
                        });
                    }).catch(() => {
                              
                    });
                },
                //获取评论数据
                getinitcomment(){
                	var _this=this;
                	$.ajax({
                        url:'initcomment',
                        type:'GET',
                        data:{
                            blogId:_this.blogId
                        },
                        dataType:'JSON',
                        success:function(data){
                            _this.comments=data;
                        }
                    });
                },
                //删除评论
                deleteComment(index){
                	var _this=this;
                	_this.$confirm('确认删除此评论?','提示',{
                		confirmButtonText:'确定',
                		cancelButtonText:'取消',
                		type:'warning'
                	}).then(()=>{
                		$.ajax({
                            url:'deletecomment',
                            type:'GET',
                            data:{
                                id:_this.comments[index].id,
                                objname:_this.comments[index].username
                            },
                            dataType:'JSON',
                            success:function(data){
                                _this.$message.success("删除成功");
                              //获取评论数据
                                _this.getinitcomment();
                            }
                        });
                	}).catch(()=>{
                		 _this.$message.info("取消成功");
                	});
                },
                //回复回复
                replyToReply(index,rindex){
                	var _this=this;
                	_this.$prompt('请输入回复内容', '回复', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        if(value==null||value.trim==0){
                            _this.$message.warning("回复内容不能为空");
                            return false;
                        }
                        $.ajax({
                            url:'addreply',
                            type:'GET',
                            data:{
                                commentId:_this.comments[index].id,
                                content:value,
                                toUserId:_this.comments[index].replys[rindex].fromuserid
                            },
                            dataType:'JSON',
                            success:function(data){
                                _this.$message.success("回复成功");
                                //获取评论数据
                                _this.getinitcomment();
                                _this.seeReply(index,true);
                            }
                        });
                    }).catch(() => {
                              
                    });
                },
                //回复回复
                deleteReply(index,rindex){
                	var _this=this;
                    _this.$confirm('确认删除此回复?','提示',{
                        confirmButtonText:'确定',
                        cancelButtonText:'取消',
                        type:'warning'
                    }).then(()=>{
                        $.ajax({
                            url:'deletereply',
                            type:'GET',
                            data:{
                                id:_this.comments[index].replys[rindex].id,
                                objname:_this.comments[index].replys[rindex].fromusername
                            },
                            dataType:'JSON',
                            success:function(data){
                                _this.$message.success("删除成功");
                              //获取评论数据
                                _this.getinitcomment();
                                _this.seeReply(index,true);
                            }
                        });
                    }).catch(()=>{
                         _this.$message.info("取消成功");
                    });
                }


            }
        })
    </script>
    <style>
        .replyDiv{
		    height: auto;
		    white-space:normal;
		    width:100%;
		    font-size: 14px;
		    line-height: 22px;
		    padding-left: 30px;
		    background: #EBEEF5;
		}
		.comcreate{
		    display: inline-block;
		    height: 22px;
		    font-size: 12px;
		    color: #909399;
		}
		.comfooter{
		    display: inline-block;
		    height: 22px;
		}
		.comcontent{
		    display: inline-block;
		    height: 22px;
		}
		.comuser{
		    display: inline-block;
		    height: 22px;
		    margin-right: 10px;
		}
		.comment{
		    height: auto;
		    white-space:normal;
		    width:100%;
		    border-top:2px dashed #EEEEEE;
		    padding:10px;
		    font-size: 14px;
		    line-height: 22px;
		}
		.content{
		    height:auto;
		}
		.info{
		    height:20px;
		    line-height:20px;
		    margin-top: 30px;
		}
		.title{
		    height: 100px;
		    overflow: hidden;
		    text-overflow:ellipsis;
		    white-space: nowrap;
		}
		.box-card{
		    width:80%;
		    padding:20px;
		    margin:0 auto;
		}
    </style>
</body>
</html>